<template>
  <div>
    <el-collapse v-model="first">
      <el-collapse-item name="1">
        <template slot="title">
          <span><h3 style="color:#2693fa"><i class="el-icon-view"></i> 基础信息</h3></span>
        </template>
        <!--        <hr style="height:1px;border:none;border-top:1px solid #a5aad7;margin-bottom: 20px"/>-->
        <avue-form ref="basicForm"
                   v-model="form"
                   :option="basicOption"></avue-form>
      </el-collapse-item>

      <el-collapse-item title="反馈 Feedback" name="2">
        <template slot="title">
          <span><h3 style="color:#2693fa"><i class="el-icon-tickets"></i> 属性字段</h3></span>
        </template>
        <!--        <hr style="height:1px;border:none;border-top:1px solid #a5aad7;margin-bottom: 20px"/>-->
        <avue-crud :option="ruleOption"
                   :table-loading="ruleLoading"
                   :data="showData"
                   :page.sync="rulePage"
                   @size-change="ruleSizeChange"
                   @current-change="ruleCurrentChang"
                   ref="ruleCrud"></avue-crud>
      </el-collapse-item>
      <el-collapse-item title="效率 Efficiency" name="3">
        <template slot="title">
          <span><h3 style="color:#2693fa"><i class="el-icon-mobile-phone"></i> 结果通知</h3></span>
        </template>
        <!--        <hr style="height:1px;border:none;border-top:1px solid #a5aad7;margin-bottom: 20px"/>-->
        <avue-form ref="notifyForm"
                   v-model="form"
                   :option="notifyOption"></avue-form>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: "programme_view",
  props: {
    form: {},
  },
  data() {
    return {
      basicOption: {
        detail: true,
        calcHeight: 30,
        dialogWidth: 900,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: false,
        selection: true,
        dialogClickModal: false,
        saveBtn: false,
        cancelBtn: false,
        delBtn: false,
        updateBtn: false,
        indexLabel: '序号',
        addTitle: '基础信息',
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 140,
        column: [
          {
            label: "方案名称",
            prop: "name",
          },
          {
            label: "同步上期例外",
            prop: "sync",
            type: 'radio',
            dicData: [
              {
                label: "是",
                value: '1'
              },
              {
                label: "否",
                value: '0'
              }
            ],
          },
          {
            label: "计划任务",
            prop: "planTask",
            type: 'radio',
            dicData: [
              {
                label: "启用",
                value: '1'
              },
              {
                label: "禁用",
                value: '0'
              }
            ],
          },
          {
            label: "执行周期",
            prop: "cycleStr",
          },
          {
            label: "方案描述",
            prop: "description",
            span: 24,
            minRows: 3,
            hide: true,
            type: "textarea",
            maxlength: 1000,
            showWordLimit: true
          },
        ]
      },
      ruleOption: {
        enter: false,
        calcHeight: 30,
        labelWidth: 110,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        indexLabel: '序号',
        selection: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        addBtn: false,
        saveBtn: false,
        cancelBtn: false,
        dialogClickModal: false,
        columnBtn: false,
        refreshBtn: false,
        searchShowBtn: false,
        submitBtn: false,
        emptyBtn: true,
        menuWidth: 80,
        menu: false,
        header: false,
        column: [
          {
            label: "主题表",
            prop: "themeId",
            dicUrl: "/api/data-quality/themeTable/getTitleIdList",
            props: {
              label: "title",
              value: "id"
            },
            type: 'select'
          },
          {
            label: "规则代码",
            prop: "code",
          },
          {
            label: "规则描述",
            prop: "describe",
          },
          {
            label: "规则类型",
            prop: "type",
            type: 'select',
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=rule_type",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            span: 24,
          },
          {
            label: "问题级别",
            prop: "problemLevel",
            type: 'select',
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=problem_level",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: 'number'
          },
          {
            label: "权重",
            prop: "weight",
          },
          {
            label: '创建时间',
            prop: 'createTime',
          },
        ]
      },
      notifyOption: {
        submitBtn: false,
        emptyBtn: false,
        detail: true,
        column: [
          {
            label: '是否通知',
            prop: 'notify',
            type: 'radio',
            formslot: true,
            value: '1',
            dicData: [
              {
                label: "是",
                value: '1'
              },
              {
                label: "否",
                value: '0'
              }
            ]
          },
          {
            label: '被通知人',
            prop: 'notifyUser',
            type: 'tree',
            dicUrl: 'api/blade-user/userTree',
            props: {
              label: "name",
              value: "id"
            },
            leafOnly: true,
            multiple: true,
            dataType: 'string',
          }
        ]
      },
      rulePage: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      ruleLoading: false,
      showData: [],
      first: '1'
    }
  },
  created() {
    this.onLoad(this.rulePage);
  },
  methods: {
    onLoad(page) {
      this.ruleLoading = true;
      let currentPage = page.currentPage;
      let pageSize = page.pageSize;
      let start = (currentPage - 1) * pageSize;
      let end = currentPage * pageSize;
      this.showData = this.form.qualityTestingRuleData.slice(start, end);
      this.rulePage.total = this.form.qualityTestingRuleData.length;
      this.ruleLoading = false;
    },
    ruleCurrentChang(currentPage) {
      this.rulePage.currentPage = currentPage;
      this.onLoad(this.rulePage);
    },
    ruleSizeChange(pageSize) {
      this.rulePage.pageSize = pageSize;
      this.onLoad(this.rulePage);
    },
  }
}
</script>

<style scoped>

</style>
